<template>
  <div class="article-container">
    <!-- 遍历文章内容，根据不同类型渲染不同的格式 -->
    <div class="article-content">
      <div
          v-for="(section, index) in visibleContent"
          :key="index"
          :class="{ 'blurred': !isPremiumUser && index >= visibleSectionsCount }"
      >
        <!-- 根据 section 的类型动态渲染 -->
        <h1 v-if="section.type === 'title'">{{ section.text }}</h1>
        <h2 v-else-if="section.type === 'subtitle'">{{ section.text }}</h2>
        <p v-else-if="section.type === 'paragraph'">{{ section.text }}</p>
        <h3 v-else-if="section.type === 'discribe'">{{ section.text }}</h3>
      </div>
      <div class="demo-rate-block">
        <span class="demonstration" style="font-size: 16px">为这篇文章评分  </span>
        <el-rate v-model="value2" :colors="colors" />
      </div>
    </div>

    <!-- 提示非高级用户模糊部分 -->
    <transition name="fade">
      <div v-if="!isPremiumUser" class="read-more-mask">
        <p class="blurred-text">成为高级用户以阅读完整文章...</p>
        <br>
      </div>
    </transition>

    <!-- 切换用户身份按钮 -->
    <button @click="toggleUserType">
      {{ isPremiumUser ? '切换到普通用户' : '切换到高级用户' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPremiumUser: false,  // 用户是否为高级用户
      value2:0,
      colors:[
        '#99A9BF', '#F7BA2A', '#FF9900'
      ],
      content: [
        {type: 'title', text: 'ChatGPT如何改变人机交互规则'},
        {type: 'discribe', text: '作者：Alice'},
        {type: 'discribe', text: '全文共 1324 字，阅读大约需要 10 分钟 '},
        {
          type: 'paragraph',
          text: 'ChatGPT是OpenAI推出的先进大语言模型。其前身包括GPT-1、GPT-2和GPT-3，这些模型在语言理解和生成方面取得了重大突破。ChatGPT尤其在指令增强方面表现出色，通过友好的web界面，用户可以进行自然语言的互动。然而，ChatGPT不仅仅是一个聊天工具，它代表了大语言模型技术的集大成者。'
        },

        {type: 'subtitle', text: '大语言模型的定义'},
        {
          type: 'paragraph',
          text: '大语言模型（LLM）是自然语言处理（NLP）领域的重要发展方向。与传统的特定任务小模型不同，LLM是基于大量数据进行训练的通用模型。传统的小模型通常为特定任务设计，如意图识别（intention detection）或实体识别（entity detection），它们通过组合来实现复杂的对话系统。而LLM则通过大规模的预训练，能够处理多种任务，展示出广泛的语言理解和生成能力。'
        },

        {type: 'subtitle', text: '大模型与小模型的对比'},
        {
          type: 'paragraph',
          text: '大语言模型的出现彻底颠覆了传统的小模型组合方式。小模型为特定任务而设计，如银行账户查询机器人只能回答与账户相关的问题，但对其他领域的问题则无能为力。大语言模型通过预训练，吸收了海量的文本数据，具备广泛的知识储备和语言生成能力。'
        },

        {type: 'subtitle', text: '预训练与微调'},
        {
          type: 'paragraph',
          text: '预训练和微调是大语言模型的重要训练步骤。预训练阶段，大模型通过吸收大量的文本数据，掌握基本的语言知识和生成能力。微调阶段，模型根据特定任务进行调整和优化，以提高其在特定领域的表现。'
        },

        {type: 'subtitle', text: '生成式预训练变换器（GPT）的原理'},
        {
          type: 'paragraph',
          text: 'GPT中的G代表生成式，P代表预训练，T代表变换器。通过编码器和解码器结构处理输入文本并生成输出。变换器是GPT模型的核心结构，能够通过提取和还原信息，实现文本的理解与生成。'
        },

        {type: 'subtitle', text: '大语言模型的挑战与幻觉'},
        {
          type: 'paragraph',
          text: '尽管大语言模型在语言生成方面表现出色，但它们也面临一些挑战。其中最显著的问题之一是"幻觉"，即模型在生成文本时，会产生一些不真实或错误的信息。这提醒我们，大语言模型在特定知识和逻辑推理方面仍有局限。'
        },

        {type: 'subtitle', text: '涌现与思考链条'},
        {
          type: 'paragraph',
          text: '大语言模型展示出涌现和思考链条的能力。涌现指模型随着参数规模增加，突然展示出新的能力。思考链条是模型逐步分解复杂问题并推理出答案的能力，显示出其在语言理解和推理方面的潜力。'
        },

        {type: 'subtitle', text: '未来发展与应用'},
        {
          type: 'paragraph',
          text: '未来的大语言模型发展可能在以下几个方向上提升：提高知识准确性、增强逻辑推理能力、增加多语言支持、个性化应用等。'
        },

        {type: 'subtitle', text: 'ChatGPT是否开启了通用人工智能的大门？'},
        {
          type: 'paragraph',
          text: '虽然ChatGPT取得了显著进展，但它离真正的通用人工智能（AGI）还有很长的路要走。要实现AGI，模型需要更广泛的认知和推理能力。OpenAI的使命是朝着AGI方向迈进，ChatGPT代表了重要一步。'
        },

        {type: 'subtitle', text: 'ChatGPT与自然语言用户界面（LUI）'},
        {
          type: 'paragraph',
          text: 'ChatGPT不仅是一个内容生成工具，它开创了自然语言用户界面（LUI），让人与机器的交互更加直观和高效。LUI类似于过去图形用户界面的出现，将极大地改变计算机技术应用的方式。'
        },

        {type: 'subtitle', text: 'ChatGPT与Web3的类比'},
        {
          type: 'paragraph',
          text: 'ChatGPT的突破可以类比Web3的去中心化发展，尽管目前二者结合的应用尚未成熟，但ChatGPT的出现展示了技术创新如何改变人类与技术的互动。'
        },

        {type: 'subtitle', text: 'ChatGPT与搜索引擎的关系'},
        {
          type: 'paragraph',
          text: 'ChatGPT通过预训练模型生成回答，与通过检索索引数据的搜索引擎有所区别。二者在信息处理方式和应用场景上有所不同。'
        },

        {type: 'subtitle', text: '大语言模型的未来：ChatGPT的应用与潜力'},
        {
          type: 'paragraph',
          text: '大语言模型在未来的各个领域展现出广泛的应用潜力，特别是在信息查询、客户服务和教育等方面。尽管目前面临技术和伦理方面的挑战，但其潜力不可忽视。'
        },

        {type: 'subtitle', text: '浏览器时刻再现：ChatGPT对科技行业的影响'},
        {
          type: 'paragraph',
          text: 'ChatGPT的出现标志着科技行业的一个重大转折点，就像浏览器改变了互联网的访问方式一样，ChatGPT通过自然语言交互改变了人们与技术的互动方式。'
        }
      ]
    };
  },
  computed: {
    visibleContent() {
      return this.isPremiumUser
          ? this.content
          : this.content.slice(0, Math.ceil(this.content.length / 4));
    },
    visibleSectionsCount() {
      return Math.ceil(this.content.length / 4);
    }
  },
  methods: {
    toggleUserType() {
      this.isPremiumUser = !this.isPremiumUser;
    }
  }
};
</script>

<style scoped>
.article-container {
  max-width: 1000px;
  position: relative;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.article-content {
  transition: filter 1s ease;
}

.blurred {
  filter: blur(5px);
}

.read-more-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.blurred-text {
  font-size: 16px;
  color: #888;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.8 */
{
  opacity: 0;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}
</style>